<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="templates/layout"
      xmlns:th="http://www.thymeleaf.org">
<body>
<div layout:fragment="content">
    <!--<script th:src="@{/scripts/test/products.js}" th:inline="javascript" type="text/javascript"></script>-->
    <div class="box box-info">
        <div class="box-header with-border">
            <h3 class="box-title" th:text="#{project.projectList.text.projectList}">Latest Orders</h3>
            <hr style="margin-top: 5px;margin-bottom: 10px;"/>
            <div class="container" style="width:100%;">
                <div class="row">
                    <div class="col-md-11" style="text-align:left">
                        <input th:placeholder="#{project.projectList.text.keywordSearch}" class="form-control input-sm"
                               type="text" value=""
                               style="width:400px;font-size:14px;display:inline;">
                        <button id="fuzzyQueryButton" class="btn btn-primary" style="display:inline;"
                                th:text="#{project.projectList.button.fuzzyQuery}">查询
                        </button>
                    </div>
                    <div class="col-md-1" style="text-align:right">
                        <input type="button" class="btn btn-primary"
                               th:value="#{project.projectList.button.createNewProject}"
                               onclick="window.location.href='/projectManagement?pid=0'"/>
                    </div>
                </div>
            </div>

            <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                </button>
            </div>
        </div>
        <!-- /.box-header -->
        <div class="box-body">
            <div class="table-responsive">

                <div class="demo-section k-content wide">
                    <div id="listView"></div>
                    <div id="pager" class="k-pager-wrap"></div>
                </div>

                <script type="text/x-kendo-template" id="template">
                    <div class="product">
                        <img src="/img/world-map.jpg" alt="#: name # image"/>
                        <div>
                            <i class="fa fa-clock-o" aria-hidden="true"></i>
                            <span>
									#:kendo.toString(new Date(createDate), "s")#
						</span>
                        </div>
                        <!--<i class="fa fa-trash-o" aria-hidden="true"></i>-->
                        <div style="padding-left: 1px;">
                            <i class="fa fa-bookmark-o" aria-hidden="true"></i>
                            <span style="padding-left: 1px;">
									#:name#
									</span>
                        </div>
                        <a href="/projectManagement?pid=#:pid#">
                            <p>#:name#</p>
                        </a>
                    </div>
                </script>


                <script>
                    $(function () {
                        var dataSource = new kendo.data.DataSource({
                            transport: {
                                read: {
                                    url: "/getAllProjects",
                                    dataType: "json"
                                }
                            },
                            pageSize: 9
                        });

                        $("#pager").kendoPager({
                            dataSource: dataSource
                        });

                        $("#listView").kendoListView({
                            dataSource: dataSource,
                            template: kendo.template($("#template").html())
                        });
                    });
                </script>
                <style>
                    #listView {
                        padding: 10px 5px;
                        margin-bottom: -1px;
                        min-height: 510px;
                    }

                    .product {
                        float: left;
                        position: relative;
                        width: 211px;
                        height: 270px;
                        margin: 0 5px;
                        padding-right: 20px;
                        padding-left: 20px;
                    }

                    .product img {
                        width: 210px;
                        height: 210px;
                    }

                    .product p {
                        visibility: hidden;
                    }

                    .product:hover p {
                        visibility: visible;
                        position: absolute;
                        width: 210px;
                        height: 210px;
                        top: 0;
                        margin: 0;
                        padding: 0;
                        line-height: 110px;
                        vertical-align: middle;
                        text-align: center;
                        color: #fff;
                        background-color: rgba(0, 0, 0, 0.75);
                        transition: background .2s linear, color .2s linear;
                        -moz-transition: background .2s linear, color .2s linear;
                        -webkit-transition: background .2s linear, color .2s linear;
                        -o-transition: background .2s linear, color .2s linear;
                    }

                    .k-listview:after {
                        content: ".";
                        display: block;
                        height: 0;
                        clear: both;
                        visibility: hidden;
                    }
                </style>
            </div>
            <!-- /.table-responsive -->
        </div>
        <!-- /.box-body -->
    </div>
</div>
</body>
</html>